<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
    <title>购物车</title>
    <link rel="stylesheet" type="text/css" href="css/base.css"/>
    <link rel="stylesheet" type="text/css" href="css/shopcar.css"/>
    <link rel="stylesheet" type="text/css" href="css/mui.min.css"/>
    <link rel="stylesheet" type="text/css" href="css/loaders.min.css"/>
    <link rel="stylesheet" type="text/css" href="css/loading.css"/>
	<link rel="stylesheet" href="/js/plugins/dialog/dialog.css"/>
    <link rel="stylesheet" type="text/css" href="sourse/layer/mobile/need/layer.css">
    <script src="js/rem.js"></script>
	<script src="/js/jquery/jquery.min.js"></script>
	<script src="js/jquery.min.js" type="text/javascript"></script>
	<script src="/js/bootstrap/js/bootstrap.min.js"></script>
	<script src="/js/plugins/jrender/jrender.js"></script>
	<script src="/js/plugins/dialog/dialog.min.js"></script>
	<script src="/js/common.js"></script>
    <script src="sourse/layer/mobile/layer.js"></script>
	<script type="text/javascript">
        var currentPage = 1;
        var pages;
        var travels;
		    $(function () {
                var user = JSON.parse(sessionStorage.getItem("user"));
                $(".loading").addClass("loader-chanage")
                $(".loading").fadeOut(300)

                //查询出购物车内容渲染
                $.get("/users/"+user.id+"/shoppings",{pageSize:3},function (data) {
                    renderView(data);
                    pages=data.pages;
                    travels=data.list;
                },"json");

                $(window).scroll(function () {
                    if(isEnd()){
                        console.log("--");
                        if(currentPage<pages){
                            currentPage++;
                            $.get("/users/"+user.id+"/shoppings",{currentPage:currentPage,pageSize:3},function (data) {
                                $.merge(travels,data.list);
                                console.log(travels);
                                renderView({list:travels});
                            },"json");
                        }else{
                            $(document).dialog({
                                type:"notice",
                                infoText:"已经到底部了",
                                autoClose:1500,
                                position:"center"
                            });
                        }
                    }
                })




				//设置结算点击事件
				$(".accountBtn").click(function () {
					//获取勾选的复选框
					var checkbox = $(".checkbox:checked");
                    //判断长度是否为0
					if(checkbox.length==0){
					    alert("请选择商品");
					    return;
					}
					//购物车id数组
					var ids = $.map(checkbox,function (ele,index) {
						//获取复选框的员工id值
						return $(ele).data('did');
                    });
					//ids为数组,里面全是购物车的id
                    console.log(ids);
					//根据购物车的ids
                    $.get("/shoppings?ids="+ids,function (data) {
                        //获取到的购物车属性
                        console.log(data);
                        //商品的id
                        var productIds = $.map(data,function (ele,index) {
                            //获取购物车商品id值
                            return ele.productId;
                        });
                        //商品id数组
                        console.log(productIds);
                        //存入商品id
                        var productIdsStr = JSON.stringify(productIds);
                        sessionStorage.setItem("productIdsStr",productIdsStr);

                        window.location.href="confirmShopping.html";
                    });

					//清空购物车
                    $.ajax({
                        url: "/shoppings?ids="+ids,
                        type: "DELETE",
                        success: function () {
							window.location.href="confirmShopping.html";
                        }
                    });


                });

                //给垃圾箱设置点击事件
				// 	//获取当前的did属性
                //     var did = $(this).data('did');
                //     console.log(did);
                //     $.ajax({
                //         url: "shoppings/byId?id="+did,
                //         type: "DELETE",
                //         success: function () {
                //             window.location.reload();
                //         }
                //     });
				//
				// });


            });


        function renderView(data) {
            $(".travels").renderValues(data,{
                //这里是动态渲染,为了加个data-did属性
                handle:function (ele,value) {
                    $(ele).attr("data-did",value);
                }


            })
        }

	</script>
</head>
<!--loading页开始-->
<div class="loading">
	<div class="loader">
        <div class="loader-inner pacman">
          <div></div>
          <div></div>
          <div></div>
          <div></div>
          <div></div>
        </div>
	</div>
</div>
<!--loading页结束-->
	<body>
		<!--header star-->
		<header class="mui-bar mui-bar-nav" id="header">
			<a class="btn" href="javascript:history.go(-1)">
	            <i class="iconfont icon-fanhui"></i>
	        </a>
	        <h4>购物车</h4>
	    </header>
	    <!--header end-->
	    <div class="warp warptwo clearfloat travels">
	    	<div class="shopcar clearfloat" render-loop="list">
	    		<div class="list clearfloat fl">
	    			<div class="xuan clearfloat fl">
	    				<div class="radio" > 
						    <label>
						        <input type="checkbox" name="sex" value="" class="checkbox checkboxBtn" render-key="list.id" render-fun="handle"/>
						    </label>
						</div>
	    			</div>
	    			<a href="javascript:void(0)">
		    			<div class="tu clearfloat fl">
		    				<span></span>
		    				<img render-src="list.productCoverUrl"/>
		    			</div>
		    			<div class="right clearfloat fl">
		    				<p class="tit over" render-html="list.productName"></p>
		    				<!--<p class="fu-tit over">颜色：蓝色  内存：120G</p>-->
		    				<p class="jifen over" render-html="list.productIntegral"></p>
		    				<div class="bottom clearfloat">
		    					<div class="zuo clearfloat fl">
		    						<ul>
		    							<li><img src="images/jian.jpg"/></li>
		    							<li>1</li>
		    							<li><img src="images/jia.jpg"/></li>
		    						</ul>
		    					</div>
		    					<i class="iconfont icon-lajixiang fr" render-key="list.id" render-fun="handle"></i>
		    				</div>
		    			</div>
	    			</a>
	    		</div>
	    	</div>
	    </div>
	    
	    <!--settlement star-->
	    <div class="settlement clearfloat">
			<div class="zuo clearfloat fl box-s">
				合计：<span id="totalIntegral"></span>
			</div>
	    	<a class="fl db accountBtn travels" >
	    		立即结算
	    	</a>
	    </div>
	    <!--settlement end-->
	    
		<!--footer star-->
	    <footer class="page-footer fixed-footer" id="footer">
			<ul>
				<li>
					<a href="shop.html">
						<i class="iconfont icon-shouye"></i>
						<p>首页</p>
					</a>
				</li>
				<li>
					<a href="cation.html">
						<i class="iconfont icon-icon04"></i>
						<p>分类</p>
					</a>
				</li>
				<li class="active">
					<a href="shopcar.html">
						<i class="iconfont icon-gouwuche"></i>
						<p>购物车</p>
					</a>
				</li>
				<li>
					<a href="center.html">
						<i class="iconfont icon-yonghuming"></i>
						<p>我的</p>
					</a>
				</li>
			</ul>
		</footer>
		<!--footer end-->
		<script type="text/javascript">
            //给按钮设置一个点击事件
            $(".clearfloat").on("click","input[type='checkbox']",function () {
                tatol();
                //获取积分值,并传入session
				var total = $("#totalIntegral").html();
                var totalString = JSON.stringify(total);
                console.log(totalString);
                sessionStorage.setItem("totalString",totalString);

            })
            $('.list ul img').click(function() { // 找到加减按钮，绑定点击事件
                var val = $(this).parent().parent().children().eq(1);
                if ($(this).parent().index()) {
                    val.html(parseInt(val.html()) + 1);
                } else {
                    val.html(val.html() > 1 ? parseInt(val.html()) - 1 : 1);
                }
                tatol();
            });

            $(".clearfloat").on("click",".icon-lajixiang",function () {// 找到删除按钮，绑定点击事件
                var self = this;
                var did = $(this).data('did');
                layer.open({
                    content: '确定删除？',
                    btn: ['确定', '取消'],
                    yes: function(index) {
                        $(self).parent().parent().parent().parent().remove();
                        layer.closeAll();
                        tatol();

                        console.log(did);
                        $.ajax({
                            url: "/shoppings/byId?id="+did,
                            type: "DELETE",
                            success: function () {
                                window.location.reload();
                            }
                        });
                    }
                });


			})

            var tatol = function() { // 计算总积分
                var count = 0;
                $('.list').map(function (index, item) {
                    var $el = $(item);
                    if ($el.find('input[type="checkbox"]').is(":checked")) {
                        count += parseFloat($el.find('.jifen').html()) * parseInt($el.find('.zuo li').eq(1).html());
                    }
                });
                if (count > 0) {
                    $('.settlement span').html(count);
                }
            }
		</script>


	</body>
</html>
